<template>
  <el-dialog ref="opDialog" 
    v-model="opDialogVisible" 
    :title="opDialogTitle" 
    width="70%"
    @closed="handleCloseDialog">
    <!-- 基本设置 -->
    <el-form ref="AddItemForm" :inline="true" :model="addItemObj" class="demo-form-inline">
      <el-form-item label="考核" prop="sid">
        <el-select size="small" v-model="addItemObj.sid" filterable  placeholder="请选择考核">
					<el-option v-for="item in assList" :key="item.id" :label="item.name" :value="item.id" ></el-option>
        </el-select>
      </el-form-item>    
      <el-form-item prop="name" label="考核项名称" style="vertical-align: top;">
        <el-input size="small" v-model="addItemObj.name" placeholder="请输入考核项名称" clearable></el-input>
      </el-form-item>
    </el-form>

    <!-- 表头 -->
    <el-card>
      <el-row :gutter="10">
        <el-col :xs="8" :sm="6" :md="2" :lg="2" :xl="2">默认选项</el-col>
        <el-col :xs="16" :sm="16" :md="9" :lg="9" :xl="9">
          本部门 <el-switch v-model="switchObj.self" inline-prompt active-text="是" inactive-text="否"></el-switch>
          非本部门 <el-switch v-model="switchObj.mutual" inline-prompt active-text="是" inactive-text="否"></el-switch>
          同组 <el-switch v-model="switchObj.same" inline-prompt active-text="是" inactive-text="否"></el-switch>
          非同组 <el-switch v-model="switchObj.different" inline-prompt active-text="是" inactive-text="否"></el-switch>
        </el-col>
        <el-col :xs="12" :sm="12" :md="5" :lg="5" :xl="5">
          <el-select size="small" style="width:100%;" v-model="defRoleList" filterable multiple placeholder="请选择默认角色">
            <el-option
              v-for="item in allRoleList"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </el-col>
        <el-col :xs="12" :sm="12" :md="5" :lg="5" :xl="5">
          <el-select size="small" style="width:100%;" v-model="defScoreType" filterable  placeholder="请选择打分方式">
            <el-option
              v-for="item in typeList"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </el-col>
        <el-col :xs="24" :sm="24" :md="2" :lg="2" :xl="2">
          <el-button type="success" size="mini"  @click="addBDBtn">修改</el-button>
        </el-col>
      </el-row>
    </el-card>
  
    <el-card v-for="(dep,index) in depList" :key="dep.id">
      <el-row :gutter="10">
        <el-col :xs="8" :sm="6" :md="2" :lg="2" :xl="2">{{dep.name}}</el-col>
        <el-col  :xs="16" :sm="16" :md="9" :lg="9" :xl="9">
          本部门 <el-switch v-model="configList[index].self" inline-prompt active-text="是" inactive-text="否"></el-switch>
          非本部门 <el-switch v-model="configList[index].mutual" inline-prompt active-text="是" inactive-text="否"></el-switch>
          同组 <el-switch v-model="configList[index].same" inline-prompt active-text="是" inactive-text="否"></el-switch>
          非同组 <el-switch v-model="configList[index].different" inline-prompt active-text="是" inactive-text="否"></el-switch>
        </el-col>
        <el-col :xs="12" :sm="12" :md="5" :lg="5" :xl="5">
          <el-select size="small" style="width:100%;" v-model="roleList[index]" filterable multiple placeholder="请选择默认角色">
            <el-option
              v-for="item in allRoleList"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </el-col>
        <el-col :xs="12" :sm="12" :md="5" :lg="5" :xl="5">
          <el-select size="small" style="width:180px" v-model="typeRowList[index]" filterable  placeholder="请选择默认打分方式">
            <el-option
              v-for="item in typeList"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </el-col>
      </el-row>
    </el-card>
    
    <!-- 抽屉 -->
    <el-drawer v-model="addB" title="添加考核部门" :with-header="true">
      <AddBD ref="AddBDRef" @getDeps="getDeps"></AddBD>
    </el-drawer>
    <!-- <el-drawer v-model="addP" title="添加考核人员" :with-header="true">
      <AddBP ref="AddBPRef"></AddBP>
    </el-drawer> -->
    <!-- 提交按钮 -->
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="opDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="submitForm">确认</el-button >
      </span>
    </template>
  </el-dialog>
</template>

<script>

import { ref, reactive, toRefs, watch } from 'vue';
import service from '/@/utils/request';
import { ElMessage } from 'element-plus';
import  AddBD  from '/@/views/assessment/item/components/addbd.vue';
// import  AddBP  from '/@/views/assessment/item/components/addbp.vue';
export default {
  name: 'AddItem',
  components: {
    AddBD,
    // AddBP
  },
  emits:['getData'],
  setup(props,{emit}) {
    const pageName = '考核项设置'
    
    let opDialogVisible = ref(false) // 操作框是否可见
    let opDialogTitle = ref(pageName + '') // 操作框是否可见

    const addItemObj = reactive({ // 基本信息
      sid:'',
      name: '',
    })

    const state = reactive({
      visible:false,
      addB:false,
      // addP:false,
      defScoreType:'',  // 默认打分类型
      defRoleList:'',  // 默认打分类型
      depList: [], //  被评部门列表
      configList: [], // 配置列表
      typeRowList: [], // 打分类型列表
      roleList: [], // 打分类型列表
    })

    const switchObj = reactive({
      self: false,
      mutual: false,
      same: false,
      different: false,
    })

    let assList =  ref([])
    let typeList =  ref([])
    let allRoleList =  ref([])
    let AddItemForm =  ref([])
    let AddBDRef =  ref()
    // let AddBPRef =  ref()

    // ===================== axios ===============
    const getAssData = async () => { // 获取角色数据
      let dataInfo = await service.get('admin/asetting/getList') // 获取数据
			if (dataInfo.code === 200) { assList.value = dataInfo.data.data } 
			else {ElMessage.error('获取考核列表信息失败')}
    }
    const getRoleData = async () => { // 获取角色数据
      let dataInfo = await service.get('admin/role/getList', {params: {searchInfo:{type:'人员'}}}) // 获取数据
			if (dataInfo.code === 200) { allRoleList.value = dataInfo.data.data } 
			else {ElMessage.error('获取角色列表信息失败')}
    }
    const getTypeData = async () => { // 获取评分类型数据
      let dataInfo = await service.get('admin/atype/getList') // 获取数据
			if (dataInfo.code === 200) { typeList.value = dataInfo.data.data } 
			else {ElMessage.error('获取评分类型列表信息失败')}
    }

    const addData = async (data) => { // 添加评分项
      let dataInfo = await service.post('admin/aitem/save', data) // 获取数据
			if (dataInfo.code === 200) { 
        ElMessage.success(dataInfo.msg) 
        emit('getData')
        } 
			else {ElMessage.error(dataInfo.msg)
      emit('getData')
      }
    }

    getAssData()
    getTypeData()
    getRoleData()

    const handleCloseDialog = () =>{
    }
    const getDeps = (deplist) =>{
      state.addB = false
      state.depList = deplist
      state.configList.splice(0, state.configList.length)
      state.typeRowList.splice(0, state.typeRowList.length)
      deplist.forEach(() => {
        state.configList.push({
          self: false,
          mutual: false,
          same: false,
          different: false,
        })
        state.typeRowList.push('')
      })
    }
    const addBDBtn = () =>{
      state.visible = false
      state.addB = true
    }
    // const addBPBtn = () =>{
    //   state.visible = false
    //   state.addP = true
    // }
    watch(() => switchObj.self, () => { // 监控属性
      let total = state.configList.length
      for (let index = 0; index < total; index++) {
        state.configList[index].self = switchObj.self
      }
    })
    watch(() => switchObj.mutual, () => { // 监控属性
      let total = state.configList.length
      for (let index = 0; index < total; index++) {
        state.configList[index].mutual = switchObj.mutual
      }
    })
    watch(() => switchObj.same, () => { // 监控属性
      let total = state.configList.length
      for (let index = 0; index < total; index++) {
        state.configList[index].same = switchObj.same
      }
    })
    watch(() => switchObj.different, () => { // 监控属性
      let total = state.configList.length
      for (let index = 0; index < total; index++) {
        state.configList[index].different = switchObj.different
      }
    })
    watch(() => state.defScoreType, () => { // 监控属性
      let total = state.typeRowList.length
      state.typeRowList.splice(0,total)
      for (let index = 0; index < total; index++) {
        state.typeRowList.push(state.defScoreType)
      }
    })
    watch(() => state.defRoleList, () => { // 监控属性
      let total = state.roleList.length
      state.roleList.splice(0,total)
      for (let index = 0; index < total; index++) {
        state.roleList.push(state.defRoleList)
      }
    })
    
    const submitForm = () => { // 提交按钮
      if (addItemObj.name == '') { ElMessage.error('请填写考核项名称！'); return; }
      if (addItemObj.sid == '') { ElMessage.error('请选择所属考核！'); return; }
      if (state.depList.length == 0) { ElMessage.error('请添加考核部门！'); return; }
      let nextStep = true
      state.typeRowList.forEach(scoreType => {
        if (scoreType == '') { nextStep = false }
      });
      if (!nextStep) { ElMessage.error('请补全打分方式！'); return; }

      let data = {}
      data['name'] = addItemObj.name
      data['sid'] = addItemObj.sid
      data['depList'] = state.depList
      data['typeRowList'] = state.typeRowList
      data['configList'] = state.configList
      data['roleList'] = state.roleList
      var dataJson = JSON.stringify(data)
      addData(dataJson)
      opDialogVisible.value = false
      state.depList.splice(0,state.depList.length)
      state.typeRowList.splice(0,state.typeRowList.length)
      state.configList.splice(0,state.configList.length)
      state.roleList.splice(0,state.roleList.length)
      AddItemForm.value.resetFields()
      getAssData()

    }
    return {
      ...toRefs(state),
      AddBDRef,
      // AddBPRef,
      opDialogVisible,
      opDialogTitle,
      addItemObj,
      assList,
      typeList,
      allRoleList,
      switchObj,
      AddItemForm,
      getDeps,
      addBDBtn,
      // addBPBtn,
      handleCloseDialog,
      submitForm,
    }
  }
}
</script>

<style>

</style>